<div class="panel panel-default">
    <div class="panel-heading">
        任务节点
        <button id="btnRefresh" type="button" class="btn btn-primary btn-xs pull-right">刷新</button>
    </div>
    <div class="panel-body">
        <div id="nodeChart" style="width: 100%;height: 500px;"></div>
        <table id="nodeTable" class="table">
            <thead>
            <tr>
                <th scope="col">NO.</th>
                <th scope="col">节点ID</th>
                <th scope="col">节点IP</th>
                <th scope="col">更新时间</th>
                <th scope="col">节点状态</th>
                <th scope="col">节点类型</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<script>
    $(function () {
        $("#btnRefresh").click(refresh);
        refresh();
    });
    function refresh() {
        // 节点图
        var nodeChart = echarts.init(document.getElementById('nodeChart'));
        nodeChart.showLoading();
        $.get('/task-manager/nodes/tree',function (data,status) {
            nodeChart.hideLoading();
            if(status != 'success'){
                alert('加载节点树失败！');
                return;
            }
            var option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove',
                    formatter:function (params) {
                        var s = 'node: ' + params.data.data.id + '<br/>';
                        if(params.data.data){
                            if(params.data.leader){
                                s += 'type: Leader <br/>';
                            }
                            else {
                                s += 'type: Worker <br/>';
                            }
                            s += 'address: ' + params.data.data.address + '<br/>';

                        }
                        return s;
                    }
                },
                series: [
                    {
                        type: 'tree',
                        data: [data],
                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        right: '30%',
                        symbolSize: 12,
                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 12
                        },
                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },
                        expandAndCollapse: true,
                        initialTreeDepth:4,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            };
            nodeChart.setOption(option);
        });
        // 列表
        $.get('/task-manager/nodes/list',function (data,status) {
            $("#nodeTable > tbody").html('');
            if(status != 'success'){
                alert('加载列表失败！');
                return;
            }
            var html = "";
            $.each(data,function (index,item) {
                html += "<tr>";
                html += "<th scope=\"row\">"+(index+1)+"</th>";
                html += "<td>"+item.id+"</td>";
                html += "<td>"+item.address+"</td>";
                html += "<td>"+item.updateTime+"</td>";
                if(item.status == 'Active'){
                    html += "<td><span class=\"label label-success\">"+item.status+"</span></td>";
                }
                else {
                    html += "<td><span class=\"label label-default\">"+item.status+"</span></td>";
                }
                if(item.role == 'Leader'){
                    html += "<td><span class=\"label label-success\">Leader</span></td>";
                }
                else {
                    html += "<td><span class=\"label label-default\">Worker</span></td>";
                }
                html += "</tr>";
            });
            $("#nodeTable > tbody").html(html);
        });
    }
</script>